<template>
  <view v-if="shenheStatus == 0" class="integralDetail">
    <view class="header-tabs">
      <u-tabs
        ref="uTabs"
        :list="tabList"
        :current="current"
        active-color="#FA230A"
        item-width="33.3%"
        @change="tabsChange"
        height="44"
        inactive-color="#262626"
      ></u-tabs>
    </view>
    <view class="detailBox" v-for="(item, index) in detailList" :key="index">
      <view class="detail">
        <view class="type">
          <text>{{ item.desc }}</text>
          <text>{{ item.created_at | date }}</text>
        </view>
        <view class="count"
          >{{ item.log_type == 1 ? '+' : '-' }}{{ item.amount }}</view
        >
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      current: 0,
      tabList: [
        {
          name: this.$t('person.cashStatus1'),
          status: 0,
        },
        {
          name: this.$t('facePay.income'),
          status: 1,
        },
        {
          name: this.$t('integral.spending'),
          status: 2,
        },
      ],
      page: 1,
      noMore: false,
      detailList: [],
    };
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: `${this.stores.integral_name}明细`,
    });
    this.getList();
  },
  filters: {
    date(e) {
      let date = new Date(e * 1000);
      let Y = date.getFullYear();
      let M = date.getMonth() + 1;
      let d = date.getDate();
      let h = date.getHours();
      let m = date.getMinutes();
      h = h >= 10 ? h : '0' + h;
      m = m >= 10 ? m : '0' + m;
      return Y + '-' + M + '-' + d + ' ' + h + ':' + m;
    },
  },
  methods: {
    // 切换导航
    tabsChange(e) {
      this.current = e;
      this.page = 1;
      this.noMore = false;
      this.detailList = [];
      this.getList();
    },
    // 获取详情列表
    getList() {
      this.$allrequest.integral
        .myIntegralList({
          type: this.current,
        })
        .then(res => {
          if (res.code == 0) {
            this.detailList = res.data;
          }
          uni.stopPullDownRefresh();
        });
    },
  },
  onPullDownRefresh() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
.integralDetail {
  width: 100%;
  min-height: 100vh;
  padding-top: 114rpx;
  background-color: #f2f2f2;
}
.header-tabs {
  width: 100%;
  height: 90rpx;
  position: fixed;
  padding-top: 20rpx;
  top: 0;
  left: 0;
  background-color: #fff;
}
.detailBox {
  width: 100%;
  padding-left: 36rpx;
  background-color: #fff;
  .detail {
    padding: 24rpx 36rpx 24rpx 0;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .type {
      width: 500rpx;
      max-width: 500rpx;
      display: flex;
      flex-direction: column;
      font-family: PingFang SC;
      font-size: 28rpx;
      color: #262626;
      text:nth-child(1) {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      text:nth-child(2) {
        font-size: 24rpx;
        color: #8c8c8c;
        margin-top: 4rpx;
      }
    }
    .count {
      font-size: 36rpx;
      color: #262626;
      font-weight: 600;
    }
  }
}
.detailBox:last-child {
  .detail {
    border-bottom: none;
  }
}
</style>
